import React, {Component} from 'react'
import {inject, observer} from "mobx-react";
import {List, Tools, Toast, TextareaItem, Picker, Icon} from "weaver-mobile";
import '../../../style/signlog/update.less'
import {toJS} from 'mobx';

const getLabel = Tools.getLabel;

export default class SignInput extends Component {
    render() {
        return (
            <div className={"updateContent"}>
                {this.getSignInputContent()}
            </div>
        )
    }

    getSignInputContent=()=> {
        const {changeRemark, remark, rows = 5} = this.props;
        return <div >
            <div className="wf-signView-panel-content">
                {this.getPickerContent()}
                <TextareaItem
                    rows={rows}
                    // ref={"updateSignInput"}
                    escape={"true"}
                    value={this.convertSpecialChar(remark)}
                    onChange={v => {
                        typeof changeRemark == "function" && changeRemark({remark: v})
                    }}
                />
            </div>
        </div>;

    }

    convertSpecialChar = (str="", isSetInnerHtml = false) =>{
        str = str.toString();
        if(!isSetInnerHtml) {
            str = str.replace(/<br>/ig, "\n");
            //对块元素进行换行处理
            str = str.replace(/<p>/ig, "\n");
            str = str.replace(/<\/?h\d+>/ig, "\n");
        }
		str=str.replace(/<\/?.+?>/ig,"");
		str = str.replace(/&nbsp;/ig, " ");
        str = str.replace(/&lt;/ig, "<");
        str = str.replace(/&gt;/ig, ">");
        str = str.replace(/&quot;/ig, "\"");
        str = str.replace(/&amp;/ig, "&");
        return str;
    }

    /**
     * 获取批示语组件
     * @returns {*}
     */
    getPickerContent = () => {
        const {appendRemark, workflowStores} = this.props;
        const {wfOperateStore = {}} = workflowStores;
        const {markInfo = {}} = wfOperateStore;
        const signParams = toJS(markInfo);

        const {phraseInfo = []} = signParams;
        let menuData = [];
        phraseInfo.map((item) => {
            const {workflowPhrases = '', workflowPhrasesContent = ''} = item;
            menuData.push({value: workflowPhrasesContent, label: workflowPhrases});
        });
        let picker = <div>

            <Picker data={menuData} cols={1} onOk={(v) => typeof appendRemark == "function" && appendRemark(v)}>
                <div className={'sign-phrase-title'}>
                    <span className={'span-title'}>{getLabel(22409, '常用批示语')}</span>
                    <Icon type="down"/>
                </div>
            </Picker>
        </div>
        return picker;
    }
}